<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../templates/structAdmin.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:pe="http://primefaces.org/ui/extensions">

    <ui:define name="content">

        <p:commandButton   value="Ayuda" styleClass=" btnhelp" onclick="dlgm.show();" type="button" /> 
        <p:panel header="Registrar Procedimiento" style="border: 0">
            <h:form id="form">

                <p:panel header="Cliente" id="pCliente" style="margin-bottom: 20px;margin-top: 20px;">

                    <h:panelGrid columns="4" cellpadding="5" >
                        <h:outputText  value="Nombre:"/>
                        <p:inputText id="cliente" rendered="true" value="#{procedimientoBean.cliente}" disabled="true" />  

                        <p:commandButton id="buscar-cliente" styleClass="buttonMain" onclick="dlg.show();" style="font-size: 12px" value="Buscar" icon="ui-icon-search" />  
                        <p:commandButton id="calcelar-cliente" update=":form:mascota :form:cliente" ajax="true" process="@this"  style="font-size: 12px" value="Cancelar" icon="ui-icon-cancel" styleClass="buttonSecundary"  actionListener="#{procedimientoBean.cancelSelectionCliente()}" />
                    </h:panelGrid>

                    <h:panelGrid columns="2" cellpadding="5" >
                        <h:outputText  value="Mascota:"/>
                        <p:selectOneMenu id="mascota" value="#{historiaClinicaBean.historiaclinica.codMascota}"  label="mascota" requiredMessage="No puedes dejar este campo sin selección."  required="true" >
                            <f:ajax render="consulta"/>
                            <f:selectItem itemLabel="Seleccione..."  value="#{null}" />
                            <f:selectItems value="#{procedimientoBean.cliente.mascotaList}" />
                        </p:selectOneMenu> 
                    </h:panelGrid>

                    <h:panelGrid columns="2" cellpadding="5" >
                        <h:outputText  value="Consulta:"/>
                        <p:selectOneMenu id="consulta" rendered="true" value="#{procedimientoBean.procedimiento.codConsulta}"  label="consulta" requiredMessage="No puedes dejar este campo sin selección."  required="true" >

                            <f:selectItem itemLabel="Seleccione..."  value="#{null}" />
                            <f:selectItems value="#{historiaClinicaBean.historiaclinica.codMascota.historiaClinicaList}" />
                        </p:selectOneMenu> 
                    </h:panelGrid>

                </p:panel>
            </h:form>

            <h:form id="fProducto">
                <p:panel header="Productos" id="pProducto" style="margin-bottom: 5px;">
                    <p:messages id="msgs" globalOnly="true" closable="true" />

                    <p:messages id="msgsProducto" globalOnly="true" closable="true" />

                    <h:panelGrid columns="4" cellpadding="5" >
                        <h:outputText value="Nombre: *"/>
                        <p:inputText value="#{procedimientoBean.detalleProcedimiento.producto}" id="producto" disabled="true" />  

                        <p:commandButton id="buscar-producto" styleClass="buttonMain" onclick="dlgProducto.show();" style="font-size: 12px" value="Buscar" icon="ui-icon-search" />  
                        <p:commandButton actionListener="#{procedimientoBean.cancelSelectionProducto()}" id="calcelar-producto" styleClass="buttonSecundary" update=":fProducto:producto" ajax="true" process="@this" style="font-size: 12px" value="Cancelar" icon="ui-icon-cancel"  />

                        <h:outputText value="Cantidad: *"/>
                        <pe:inputNumber maxlength="10" maxValue="9999999999" id="cantidad" required="true" value="#{procedimientoBean.detalleProcedimiento.cantidad}"  />  

                    </h:panelGrid>
                </p:panel>

                <p:commandButton value="Agregar" styleClass="buttonMain" id="addProducto" update="@form,:tProducto" actionListener="#{procedimientoBean.addDetalleAction()}" icon="ui-icon-disk" />
            </h:form>

            <h:form id="tProducto">
                <p:dataTable emptyMessage="No se encontraron registros." style="margin: 20px 0px 5px 0px;" 
                             id="cTable" 
                             var="detalleProcedimiento" 
                             value="#{procedimientoBean.detalleProcedimientos}" 
                             paginator="true" 
                             rows="10"  
                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                             rowsPerPageTemplate="5,10,15"
                             paginatorPosition="bottom"
                             selectionMode="single"
                             selection="#{procedimientoBean.detalleProcedimiento}"
                             rowKey="#{detalleProcedimiento.producto}">

                    <f:facet name="header">  
                        Productos Seleccionadas
                    </f:facet>  

                    <p:column>  
                        <f:facet name="header">  
                            <h:outputText value="Nombre" />  
                        </f:facet>  
                        <h:outputText value="#{detalleProcedimiento.producto.descripcion}" />  
                    </p:column> 

                    <p:column>  
                        <f:facet name="header">  
                            <h:outputText value="Vr. Unit" />  
                        </f:facet>  
                        <h:outputText value="#{detalleProcedimiento.producto.precio}" />  
                    </p:column>  

                    <p:column>  
                        <f:facet name="header">  
                            <h:outputText value="Cant" />  
                        </f:facet>  
                        <h:outputText value="#{detalleProcedimiento.cantidad}" />  
                    </p:column>  

                    <p:column>  
                        <f:facet name="header">  
                            <h:outputText value="Costo" />  
                        </f:facet>  
                        <h:outputText value="#{detalleProcedimiento.costo()}" />  
                    </p:column>  

                </p:dataTable>  

                <p:commandButton style="margin: 0px 15px 0px 0px;" update=":tProducto" actionListener="#{procedimientoBean.returnDetalle()}" value="Devolver" styleClass="buttonMain" id="returnProcedimiento" icon="ui-icon-cancel"  />

            </h:form>


            <h:form id="fProcedimiento">
                <p:messages id="msgs" globalOnly="true" closable="true" />

                <p:panel header="Información Básica" style="margin: 20px 0px 5px 0px;" >

                    <h:panelGrid columns="2" cellpadding="10">

                        <h:outputText value="Estado *" />
                        <p:inputTextarea value="#{procedimientoBean.procedimiento.estado}" required="true" requiredMessage="No puedes dejar este campo en blanco." cols="50" rendered="true"/>     

                        <h:outputText value="Recomendaciones *"/>
                        <p:inputTextarea value="#{procedimientoBean.procedimiento.recomendaciones}" required="true" requiredMessage="No puedes dejar este campo en blanco." cols="50" rendered="true" />     

                        <h:outputLabel value="Fecha: *" />
                        <p:calendar value="#{procedimientoBean.procedimiento.fecha}" id="fecha" required="true" requiredMessage="No puedes dejar este campo en blanco." label="fecha"  pattern="dd-MM-yyyy" showButtonPanel="button" rendered="true"/>

                    </h:panelGrid>
                </p:panel>
                <p:commandButton  styleClass="buttonMain"  actionListener="#{procedimientoBean.saveAction()}" style="margin: 0px 15px 0px 0px;" value="Registrar Procedimiento"  icon="ui-icon-disk"  update="@form, :fProcedimiento, :fProducto, :tProducto" />
                <p:commandButton styleClass="buttonSecundary" actionListener="#{procedimientoBean.cancelAction()}" value="Cancelar Procedimiento"  icon="ui-icon-close" update="@form" />

            </h:form>

            <p:dialog id="dialog" header="Ayuda" widgetVar="dlgm" draggable="false" closable="true" appendToBody="true" visible="false" modal="true" showEffect="fade" hideEffect="fade"  resizable="false">  

                <h:form>
                    <h:panelGrid columns="2">

                        <p style="text-align: justify">

                            * Para completar un procedimiento usted debe seleccionar un Cliente, una Mascota y una consulta previamente ingresadas.  
                            <br />
                            * A continuación agregue con el botón Agregar productos utilizados en el procedimiento, se mostraran en pantalla la lista de productos agregados. Ingrese la Información del procedimiento.
                            <br />
                            * Si selecciona la opción Procedimiento y los datos son correctos se guardara exitosamente el procedimiento.
                            <br />
                            * Si selecciona la opción Cancelar Procedimiento se borraran los datos anteriormente ingresados.
                        </p>
                    </h:panelGrid>
                    <br/> 

                    <p:commandButton value="Aceptar" styleClass="buttonMain"  oncomplete="dlgm.hide();" />
                </h:form>

            </p:dialog>


        </p:panel>





        <p:dialog header="Cliente" widgetVar="dlg" resizable="false" modal="false" appendToBody="true" >
            <h:form id="formDialog">

                <p:dataTable emptyMessage="No se encontraron registros." style="margin-bottom: 5px;margin-top: 10px;" 
                             id="cTable" 
                             var="cliente" 
                             value="#{clienteBean.obtenerClientes()}" 
                             paginator="true" 
                             rows="10"  
                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                             rowsPerPageTemplate="5,10,15"
                             paginatorPosition="bottom"
                             selectionMode="single"
                             selection="#{procedimientoBean.cliente}"
                             rowKey="#{cliente.cedula}">

                    <f:facet name="header">  
                        Clientes registrados
                    </f:facet> 

                    <p:ajax event="rowSelect" update=":form:cliente,:form:mascota" />  

                    <p:column headerText="Identificación" filterBy="#{cliente.cedula}">   
                        <h:outputText value="#{cliente.cedula}" />  
                    </p:column>  

                    <p:column headerText="Nombre" filterBy="#{cliente.nombre}">   
                        <h:outputText value="#{cliente.nombre}"  />  
                    </p:column>  

                    <p:column headerText="Apellido" filterBy="#{cliente.apellido}" >  
                        <h:outputText value="#{cliente.apellido}" />  
                    </p:column> 

                    <p:column headerText="Email" filterBy="#{cliente.email}">  
                        <h:outputText value="#{cliente.email}" />  
                    </p:column> 

                    <p:column headerText="Dirección" filterBy="#{cliente.direccion}">  
                        <h:outputText value="#{cliente.direccion}" />  
                    </p:column> 

                    <p:column headerText="Fijo" filterBy="#{cliente.fijo}">  
                        <h:outputText value="#{cliente.fijo}" />  
                    </p:column> 

                    <p:column headerText="Celular" filterBy="#{cliente.celular}">  
                        <h:outputText value="#{cliente.celular}" />  
                    </p:column>  

                    <p:column headerText="Puntos" filterBy="#{cliente.cantidadpuntos}">  
                        <h:outputText value="#{cliente.cantidadpuntos}" />  
                    </p:column> 

                    <p:column headerText="Ciudad" filterBy="#{cliente.codCiudad}">  
                        <h:outputText value="#{cliente.codCiudad}" />  
                    </p:column> 

                </p:dataTable>

                <p:commandButton value="Aceptar"  update=":form:cliente,:form:mascota" oncomplete="dlg.hide();" />
            </h:form>
        </p:dialog>

        <p:dialog header="Producto" widgetVar="dlgProducto" resizable="false" modal="true" appendToBody="true" >
            <h:form id="formDialogProducto">

                <p:dataTable emptyMessage="No se encontraron registros." style="margin-bottom: 5px;margin-top: 10px;" 
                             id="pTable" 
                             var="producto" 
                             value="#{productoBean.obtenerProductosActivos()}" 
                             paginator="true" 
                             rows="10"  
                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                             rowsPerPageTemplate="5,10,15"
                             paginatorPosition="bottom"
                             selectionMode="single"
                             selection="#{procedimientoBean.detalleProcedimiento.producto}"
                             rowKey="#{producto.codigo}">

                    <f:facet name="header">  
                        Productos registrados
                    </f:facet> 



                    <p:column headerText="Nombre" filterBy="#{producto.descripcion}">   
                        <h:outputText value="#{producto.descripcion}" />  
                    </p:column>  

                    <p:column headerText="Precio" filterBy="#{producto.precio}">   
                        <h:outputText value="#{producto.precio}"  />  
                    </p:column>  

                    <p:column headerText="Cantidad" filterBy="#{producto.cantidad}" >  
                        <h:outputText value="#{producto.cantidad}" />  
                    </p:column> 

                    <p:column headerText="Unidad de Medida" filterBy="#{producto.umed}">  
                        <h:outputText value="#{producto.umed}" />  
                    </p:column> 

                    <p:column headerText="Puntos" filterBy="#{producto.puntos}">  
                        <h:outputText value="#{producto.puntos}" />  
                    </p:column> 

                    <p:column headerText="Estado" filterBy="#{producto.estado}">  
                        <h:outputText value="#{producto.estado}" />  
                    </p:column> 

                </p:dataTable>

                <p:commandButton value="Aceptar" styleClass="buttonMain"  update=":fProducto:producto" oncomplete="dlgProducto.hide();" />
            </h:form>
        </p:dialog>

    </ui:define>
</ui:composition>
